<template>
  <el-dialog :visible.sync="showPointDialog" :before-close="check" title="关联产品" width="60%">
    <el-form>
      <el-row type="flex" justify="start">
        <el-col :span="8">
          <el-form-item label="产品ID" label-width="80px">
            <el-input v-model="productId" style="width:90%" size="mini" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="产品名称" label-width="80px">
            <el-input v-model="name" style="width:90%" size="mini" />
          </el-form-item>
        </el-col>
        <el-col :span="1" class="absolute main-button">
          <el-button
            size="mini"
            type="warning"
            round
            icon="el-icon-refresh"
            @click="reset"
          >重置</el-button>
        </el-col>
        <el-col :span="1" class="absolute main-buttons">
          <el-button
            size="mini"
            round
            type="primary"
            icon="el-icon-search"
            @click="loadList"
          >查询</el-button>
        </el-col>
      </el-row>
    </el-form>
    <div class="app-table">
      <el-table
        :data="list"
        border
        style="width: 100%"
      >
        <el-table-column label="产品ID">
          <template slot-scope="scope">
            <el-popover v-if="scope.row.productId" :content="scope.row.productId" placement="top" trigger="hover">
              <span slot="reference" style="cursor:pointer">{{ scope.row.productId }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="产品名称">
          <template slot-scope="scope">
            <el-popover v-if="scope.row.productName" :content="scope.row.productName" placement="top" trigger="hover">
              <span slot="reference" style="cursor:pointer">{{ scope.row.productName }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="产品状态">
          <template slot-scope="scope">
            {{ scope.row.status === '0' ? '上线' : '下线' }}
          </template>
        </el-table-column>
        <el-table-column label="审核状态">
          <template slot-scope="scope">
            <span v-if="scope.row.reviewStatus === '0'">
              未提交
            </span>
            <span v-if="scope.row.reviewStatus === '1'">
              审核中
            </span>
            <span v-if="scope.row.reviewStatus === '2'">
              已通过
            </span>
            <span v-if="scope.row.reviewStatus === '3'">
              未通过
            </span>

          </template>
        </el-table-column>
        <el-table-column label="所属平台">
          <template slot-scope="scope">
            <el-popover v-if="scope.row.platformName" :content="scope.row.platformName" placement="top" trigger="hover">
              <span slot="reference" style="cursor:pointer">{{ scope.row.platformName }}</span>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination :current-page="pageid" :page-sizes="[20,50,100]" :page-size="pagecount" :total="count" background highlight-current-row layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { getConnect } from '@/api/services.js'
export default {
  name: 'Watch',
  props: {
    editDialog: {
      type: Boolean,
      default: false
    },
    watchId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      showPointDialog: false, // 遮罩
      list: [],
      serviceId: '', // 服务id
      productId: '', // 产品id
      productName: '', // 产品名称
      name: '',
      pageid: 1, // 当前页数
      pagecount: 20, // 每页可显示条数
      status: false, // 请求状态
      count: 0
    }
  },
  watch: {
    editDialog(newVal) {
      this.showPointDialog = newVal
      this.serviceId = this.watchId
      if (newVal) {
        this.loadList()
      }
    }
  },
  methods: {
    // 回调父组件
    check() {
      this.showPointDialog = false
      this.reset()
      this.$emit('closeConect')
    },
    reset() {
      this.name = ''
      this.productId = ''
    },
    // 请求列表
    loadList() {
      var data = {
        serviceId: this.serviceId,
        productName: this.name,
        productId: this.productId,
        pageid: 1, // 当前页数
        pagecount: 20 // 每页可显示条数
      }
      getConnect(data).then(res => {
        if (res.resultCode === '0000') {
          this.list = res.data.list
          this.count = parseInt(res.data.count) // 总数量
          if (this.list.length > 0) {
            this.pageid = parseInt(res.data.list[0].pageid) // 当前页数
          }
          this.status = true
        }
      })
    },

    // 当前页面显示条数改变时
    handleSizeChange(num) {
      this.flag = false
      const request = {
        serviceId: this.serviceId,
        name: this.name,
        productId: this.productId,
        pageid: 1, // 当前页数
        pagecount: num // 每页可显示条数
      }
      console.log('请求数据')
      console.log(request)
      getConnect(request).then(res => {
        this.list = res.data.list // 列表项
        this.count = parseInt(res.data.count) // 总数量
        this.pageid = 1
        this.pagecount = num
        this.flag = true
      }).catch(() => {
        this.$message({
          message: '请求列表失败，请重试',
          type: 'error'
        })
      })
    },

    // 跳转某页
    handleCurrentChange(num) {
      this.pageid = num // 当前页数
      console.log(num)
      const request = {
        serviceId: this.serviceId,
        name: this.name,
        productId: this.productId,
        pageid: num, // 当前页数
        pagecount: this.pagecount // 每页可显示条数
      }
      console.log('请求数据')
      console.log(request)
      // if (this.flag === true) {
      getConnect(request).then(response => {
        this.list = response.data.list // 列表项
        this.count = parseInt(response.data.count) // 总数量
        console.log('返回数据')
        console.log(response.data)
      })
      // }
    }
  }
}
</script>

<style scoped>
.main-buttons{
  right: 167px;
  top: 5px;
}
</style>
